<template>
    <el-dialog title="佣金测算结果" :visible.sync="dialogVisible" width="700px" class="cesuanDialog">
        <div class="flex-wrapper">
            <div class="flex-item">
                楼盘：
                <el-select v-model="devId" @change="devChange">
                    <el-option
                        v-for="item in checked"
                        filterable
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </div>
            <div class="flex-item">
                楼盘均价：{{devInfo.averPrice}}元/㎡
            </div>
        </div>
        <div class="flex-wrapper">
            <div class="flex-item">
                楼盘面积范围：{{devInfo.projectMinHouseSize}}-{{devInfo.projectMaxHouseSize}} ㎡
            </div>
            <div class="flex-item">
                楼盘预估总价范围：{{(devInfo.averPrice*devInfo.projectMinHouseSize).toFixed(2)}}
                -{{(devInfo.averPrice*devInfo.projectMaxHouseSize).toFixed(2)}}元
            </div>
        </div>
        <div class="flex-wrapper">
            <div class="flex-item">
                楼盘预估总价：<el-input v-model="totalPrice" class="w-150"></el-input>元
            </div>
            <div class="flex-item">
                <el-button type="primary" size="small" @click="cesuanHandle">测算</el-button>
            </div>
        </div>
        <div class="flex-wrapper">
            <span style="padding-left: 90px;">（注：系统默认取值分佣比例最大时的楼盘预估总价）</span>
        </div>
        <table v-for="item in result">
            <tr>
                <td colspan="6" style="background: #ddd;">测算结果--套餐名称：{{item.packageName}}</td>
            </tr>
            <tr>
                <td>1</td>
                <td>好生活收入</td>
                <td>{{item.totalAmount}}元</td>
                <td>5</td>
                <td>好生活利润率</td>
                <td>{{item.profitMargin}}%</td>
            </tr>
            <tr>
                <td>2</td>
                <td>好生活成本</td>
                <td>{{item.channelAmount}}元</td>
                <td>6</td>
                <td>分佣比例</td>
                <td>{{item.commissionRatio}}%</td>
            </tr>
            <tr>
                <td>3</td>
                <td>好生活返还款</td>
                <td>{{item.cashBackAmount}}元</td>
                <td>7</td>
                <td>返还款比例</td>
                <td>{{item.proportionOfRefunds}}%</td>
            </tr>
            <tr>
                <td>4</td>
                <td>好生活利润</td>
                <td>{{item.platformAmount}}元</td>
                <td></td>
                <td></td>
                <td></td>
            </tr>
        </table>
    </el-dialog>
</template>

<script>

export default {
    created() {

    },
    mounted() {},
    components: {},
    props:['checked','cesuanCopy'],
    data() {
        return {
            dialogVisible:false,
            devId: '',
            result: [{}],
            totalPrice: '',
            devInfo: {},
        }
    },
    methods: {
        showDialog(){
            this.dialogVisible = true
            this.devId = ''
            this.devInfo = {}
            if(this.checked.length==1){
                this.devId = this.checked[0].id
                this.devChange()
            }
        },
        devChange(){
            this.$axios.post('/estate/dev/select/mapParam',{devId:this.devId}).then(res=>{
                this.devInfo = res
            })
        },
        cesuanHandle(){
            if(!this.devId){
                this.$message.info('请选择楼盘')
                return;
            }
            let copy = JSON.parse(JSON.stringify(this.cesuanCopy))
            copy.estateIdList = [this.devId]
            copy.totalPrice = this.totalPrice
            this.$axios.post('/commission/CMSetUpBro/commissionCalculate',copy).then(res=>{
                this.result = res
                this.totalPrice = res[0].totalPrice
            })
        }
    },
    computed: {}
}
</script>
<style lang="stylus" scoped>
    .cesuanDialog {
        .flex-wrapper{
            display: flex;
            line-height: 40px;
            .flex-item{
                flex:1;
            }
        }
        table{
            td{
                line-height: 30px;
                text-align: center;
            }
        }
    }
</style>
